<!DOCTYPE html>
<html>
<head>
    
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    
    <title>Steuerelement Positionen</title>
    
    <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" 
          rel="stylesheet" 
          type="text/css" />
          
    <!-- Google Maps API -->
    <script type="text/javascript" 
	 	src="http://maps.google.com/maps/api/js?v=3.5&sensor=false">
    </script> 
    
    <script type="text/javascript">
    
    // Karte initialisieren
    function initialize() {
      
      // Platzieren der Google Maps Navigationselemente
      // an verschiedenen Stellen der Karte
      var myOptions = {
        zoom: 12,
        center: new google.maps.LatLng(-28.643387, 153.612224),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
            position: google.maps.ControlPosition.BOTTOM
        },
        navigationControl: true, // Navigation
        navigationControlOptions: {
            style: google.maps.NavigationControlStyle.ZOOM_PAN,
            position: google.maps.ControlPosition.TOP_RIGHT
        },
        scaleControl: false, // Skalierung
        scaleControlOptions: {
            position: google.maps.ControlPosition.TOP_LEFT
        }     
      }
      
	  // Karte initialisieren
      var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);                          
    }

    </script>

</head>

<body onload="initialize()">

	<!-- Kartendarstellung -->
	<div id="map_canvas">
    
    </div>
    
</body>

</html>
